<template>
  <div class="flex justify-center items-center py-8">
    <div class="flex flex-col items-center space-y-2">
      <h3 class="text-2xl">密码修改</h3>
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="far fa-lock"></i>
        </span>
        <InputText v-model="oldPassword" type="password" placeholder="旧密码" />
      </div>
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="far fa-lock"></i>
        </span>
        <Password v-model="newPassword" placeholder="新密码">
          <template #footer>
            <Divider />
            <p class="mt-2">密码建议</p>
            <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
              <li>至少有一个小写字母</li>
              <li>至少有一个大写字母</li>
              <li>至少有一个数字</li>
              <li>至少有8位密码</li>
            </ul>
          </template>
        </Password>
      </div>
      <div class="w-full">
        <Button
          label="保存"
          class="w-full"
          @click="_changePassword"
          :disabled="!oldPassword || !newPassword"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'AccountPassowrd'
})
</script>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import { changePassword } from '@/api/user/user'
import { useToast } from 'primevue/usetoast'

import InputText from 'primevue/inputtext'
import Password from 'primevue/password'
import Divider from 'primevue/divider'
import Button from 'primevue/button'

const oldPassword = ref('')
const newPassword = ref('')

let toast = useToast()

function _changePassword() {
  changePassword(oldPassword.value, newPassword.value)
    .then(() => {
      toast.add({
        severity: 'success',
        summary: '修改成功',
        detail: '密码修改成功',
        life: 3000
      })
    })
    .catch(err => {
      toast.add({
        severity: 'error',
        summary: '修改失败',
        detail: err.data.msg,
        life: 3000
      })
    })
}
</script>